<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .border1{
                width: 600px;
                height: 700px;
                border: 2px black solid;
                margin: 0 auto
            }
            .border1-1{
                width: 600px;
                height: 150px;
                background-color: #b4e5e5
            }
            .border1-1-1{
                line-height: 150px;
                text-align: center
            }
            #sourt{
                text-decoration: none;
                color: black
            }
        </style>
    </head>
    <body>
    <div class="border1">
        <div class="border1-1">
            <div class="border1-1-1"><a id="sourt" href="#"><span style="font-size: 50px;color: red">童话</span></a></div>
        </div>
        <div>
            <table style="width: 550px;margin-left: 30px">
                <tr align=center height="30px">
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                </tr>
                {% for i in book_list %}
                <tr align=center height="50p">
                    <td><a style="text-decoration: none;color: black" href="">{{i.book_name}}</a></td>
                    <td><a style="text-decoration: none;color: black" href="">{{i.book_type}}</a></td>
                    <td><a style="text-decoration: none;color: black" href="">{{i.author}}</a></td>
                    <td><a style="text-decoration: none;color: black" href="">{{i.public}}</a></td>
                </tr>
                {% endfor %}
            </table>
        </div>
    </div>
    </body>
</html>